---
title: React Native Reusables
description: Universal shadcn/ui for React Native featuring a focused collection of components - Crafted with NativeWind v4 and accessibility in mind.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import { Aside, Card, FileTree } from '@astrojs/starlight/components';

### Universal [shadcn/ui](https://ui.shadcn.com) for React Native

Crafted with [NativeWind v4](https://www.nativewind.dev/v4/overview) and accessibility in mind, `react-native-reusables` is open source, offering a foundation for developing your own high-quality component library.

<video controls>
  <source src="https://github.com/mrzachnugent/react-native-reusables/assets/63797719/ae7e074f-05a4-4568-b71a-f1e0be13650d" type="video/mp4" />
  Your browser does not support the video tag.
</video>

<Card title="Purpose">
  Build your own component libraries with `react-native-reusables`. Copy, paste, and tailor the code to suit your specific requirements. 
</Card>

### Features
- **Universal**: Components, hooks, and utilities for Android, iOS, and the web applications.
- **Accessibility**: Built with accessibility in mind. Using [radix-ui/primitives](https://www.radix-ui.com/primitives) for web and [rn-primitives](https://rn-primitives.vercel.app/) for native platforms.
- **Incremental adoption**: Use as much or as little as you need at your own pace.
- **Code sharing**: Share code between web and native applications.
- **Customization**: The code lives in your project, not in your `node_modules` folder. You can customize it to your heart's content.
- **Dark mode**: Re-usable css variables for light and dark modes.

<br />

<Card title="Project Scope">
This project includes only components built without third-party libraries or those that use [@rn-primitives](https://rn-primitives.com) _(universal radix-ui/primitives)_. However, we have a [list](https://github.com/mrzachnugent/react-native-reusables?tab=readme-ov-file#project-scope) of libraries and repositories to help you find or create these additional components.
</Card>

### How to use

1. [Use a template or manually setup configuration](/getting-started/initial-setup)
2. [Browse and copy/paste into your project](/components/accordion)
3. Customize the code to suit your specific requirements


### The `react-native-reusables` way

This project aims to provide as little opinionated code as possible. However, some opinionated code is necessary to provide a consistent and easy-to-use experience.

- The CSS variable names are based on shadcn/ui's naming convention.
- Folder structure:

  - `~/components/ui` for components styled with NativeWind.
  - `~/lib` for utilities, hooks, and constants.

<FileTree>
    - components/
      - ui/
    - lib/
</FileTree>
